<script lang="ts" setup>
import type { WebsiteVO } from '@/request/api/website'

const { data } = defineProps({
  data: {
    type: Array<WebsiteVO>,
    default: () => []
  }
})
</script>

<template>
  <el-container
    v-for="(p, i) in data"
    :key="i"
    v-slide-in
    class="cursor-pointer use-second-bg use-transitions-shadow-short use-radius-sm use-shadow h-[280px]"
    direction="vertical"
  >
    <a :href="p.url" target="_blank">
      <el-container class="h-32">
        <ImageBox :url="p.cover" class="hover-big use-transitions-size" />
      </el-container>
      <el-container class="p-3 gap-1 justify-between use-transitions-colors" direction="vertical">
        <span class="flex items-center gap-2">
          <el-avatar :size="50" :src="p.avatar" />
          <span class="ellipsis-1 w-4/5 text-xl">{{ p.title }}</span>
        </span>
        <span class="h-12 ellipsis-2">{{ p.introduction }}</span>
        <SvgIcon :message="p.createTime.toString()" name="edit" parentClass="text-sm pt-1" />
      </el-container>
    </a>
  </el-container>
</template>

<style lang="scss" scoped></style>
